<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      margin: 100px auto;
      width: 800px;
      height: 600px;
      position: relative;
      top: 0px;
      left: 0px;
      background-color: aqua;
    }

    p {
      width: 20px;
      height: 20px;
      background-color: green;
      position: absolute;
    }

    .head {
      background-color: red;
    }

    .food {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: yellow;
      border-radius: 50%;
    }
  </style>
</head>

<body>

  <div class="box">
    <p class="head" style="left: 20px;top: 0px;"></p>
    <p style="left: 0px;top: 0px;"></p>
  </div>

  <script>
    let head = document.querySelector(".head")
    let box = document.querySelector(".box")
    //"ArrowRight"
    let num = 39
    // 重新开始
    let restar = (str) => {
      let isstart = confirm(str)
      if (isstart) {
        location.reload()
      }
    }
    
    // 移动身体
    let move = function (code, dir, val) {
      // 上下,左右的keycode 的值,相差是2
      if (Math.abs(num - code) == 2) {
        // 提示是否重新开始
        restar("咬住自己了,需要重新开始吗")
        return
      }
      // 重新改变方向的值
      num = code
      // 重新获取所有的p标签
      let pArr = document.querySelectorAll("p")
      // 从最后一个 往前1个移动,蛇头不移动
      for (let i = pArr.length - 1; i > 0; i--) {
        pArr[i].style.left = pArr[i - 1].style.left
        pArr[i].style.top = pArr[i - 1].style.top
      }
      // let left = Number.parseInt(head.style.left)
      // let top = Number.parseInt(head.style.top)
      let dir_val = Number.parseInt(head.style[dir])
      // 头部移动
      dir_val += val;
      head.style[dir] = dir_val + "px"
    }

    // 创建食物
    let creatFood = function () {
      let left = Math.floor(Math.random() * 40)
      let top = Math.floor(Math.random() * 30)
      let div = document.createElement("div");
      div.className = "food"
      div.style.left = (left * 20) + "px";
      div.style.top = (top * 20) + "px";
      box.append(div)
    }
    // 添加身子
    let addBody = function () {
      let pArr = document.querySelectorAll("p")
      let p = document.createElement("p");
      // 获取最后一个元素的left 和top,创建的新元素和最后元素重叠
      p.style.left = pArr[pArr.length - 1].style.left
      p.style.top = pArr[pArr.length - 1].style.top
      box.append(p)
      // 重新创建食物
      creatFood()
    }
    // 判断是否吃食物
    let eat = function () {
      let food = document.querySelector(".food")
      let head = document.querySelector(".head")
      // 吃到食物
      if (head.style.left == food.style.left && head.style.top == food.style.top) {
        // 删除食物
        food.remove();
        // 添加身子
        addBody()
      }
    }

    // 移动蛇
    window.onkeydown = function () {
      // console.log(event.code);
      // console.log(event.keyCode);
      // 移动
      switch (event.code) {
        case "ArrowRight":
          // left += 20;
          // head.style.left = left + "px"
          move(event.keyCode, "left", 20);
          break;
        case "ArrowLeft":
          move(event.keyCode, "left", -20);
          break;
        case "ArrowUp":
          move(event.keyCode, "top", -20);
          break;
        case "ArrowDown":
          move(event.keyCode, "top", 20);
          break;
        default:
          break;
      }
      // 判断是否吃掉食物
      eat()
      // 判断是否结束
      end()
    }



    // 判断什么条件结束游戏
    let end = function () {
      // 需要重新获取left 和top的值
      let left = Number.parseInt(head.style.left)
      let top = Number.parseInt(head.style.top)
      // 蛇头出墙
      if (left >= 800 || top >= 600 || left < 0 || top < 0) {
        // 提示是否重新开始
        restar("撞墙了,需要重新开始吗")
        return
      }
      let pArr = document.querySelectorAll("p")
      // 蛇头咬住自己身子
      for (let i = 1; i < pArr.length; i++) {
        if (head.style.left == pArr[i].style.left && head.style.top == pArr[i].style.top) {
          // 提示是否重新开始
          restar("咬住自己了,需要重新开始吗")
          return
        }
      }
    }
    window.onload = function () {
      // 开启判断
      // eatid =  setInterval(eat,100);
      // endid =  setInterval(end,100);
      // 重新创建食物
      creatFood()
    }
  </script>

</body>

</html>